/**
 * 主页面
 */
import React, {Component} from 'react';
import {View, StyleSheet, Image, Text, Platform, Navigator} from  'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Home from '../Home/Home';
import Mine from '../Mine/Mine';
import Shop from '../Shop/Shop';
import More from '../More/More';
import Icon from 'react-native-vector-icons/FontAwesome';
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';
let HomeIcon = require('../../img/icon_tabbar_homepage.png');
let HomeIconSelected = require('../../img/icon_tabbar_homepage_selected.png');

let ShopIcon = require('../../img/icon_tabbar_merchant_normal.png');
let ShopIconSelected = require('../../img/icon_tabbar_merchant_selected.png');

let MineIcon = require('../../img/icon_tabbar_mine.png');
let MineIconSelected = require('../../img/icon_tabbar_mine_selected.png');

let MoreIcon = require('../../img/icon_tabbar_misc.png');
let MoreIconSelected = require('../../img/icon_tabbar_misc_selected.png');

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Home',
            tabBarHeight:49
        };
        // this.renderTabBarItem = this.renderTabBarItem.bind(this)
    }
    static navigationOptions={
        header:null
    };
    render() {
        return (
            <View style={styles.container}>
                <TabNavigator sceneStyle={{paddingBottom: this.state.tabBarHeight}}
                              tabBarStyle={{height: this.state.tabBarHeight, overflow: 'hidden'}}
                >
                    {this.renderTabBarItem('首页', HomeIcon, HomeIconSelected, 'Home', '首页', Home)}
                    {this.renderTabBarItem('配送点', ShopIcon, ShopIconSelected, 'Shop', '配送点', Shop)}
                    {this.renderTabBarItem('我的', MineIcon, MineIconSelected, 'Mine', '我的', Mine)}
                    {this.renderTabBarItem('更多', MoreIcon, MoreIconSelected, 'More', '更多', More)}
                    {this.renderTabBarItem('社区',ShopIcon,ShopIconSelected,'community','社区',Shop)}
                </TabNavigator>
            </View>
        );
    }

    //

    //使用rn-viewpager
// <IndicatorViewPager
//     style={{flex:1,backgroundColor:'white'}}
// indicator={this._renderTabIndicator()}
// >
// <View>
// <Home {...this.props}/>
// </View>
// <View>
//     <Shop {...this.props}/>
// </View>
// <View>
// <Mine {...this.props}/>
// </View>
// <View>
//     <More {...this.props}/>
// </View>
// </IndicatorViewPager>

    //使用react-native-tab-navigator
// <TabNavigator sceneStyle={{paddingBottom: this.state.tabBarHeight}}
// tabBarStyle={{height: this.state.tabBarHeight, overflow: 'hidden'}}
// >
// {this.renderTabBarItem('首页', HomeIcon, HomeIconSelected, 'Home', '首页', Home)}
// {this.renderTabBarItem('配送点', ShopIcon, ShopIconSelected, 'Shop', '配送点', Shop)}
// {this.renderTabBarItem('我的', MineIcon, MineIconSelected, 'Mine', '我的', Mine)}
// {this.renderTabBarItem('更多', MoreIcon, MoreIconSelected, 'More', '更多', More)}
// {this.renderTabBarItem('社区',ShopIcon,ShopIconSelected,'community','社区',Shop)}
// </TabNavigator>
    handleTabBar(state){
        this.setState({
            tabBarHeight: state ? 49 : 0
        });
    }
    renderTabBarItem(title, icon, selectedIcon, selectedTab, componentName, Component1, badgeText) {
        return (
            <TabNavigator.Item
                title={title}
                selected={this.state.selectedTab === selectedTab}
                onPress={() => this.setState({selectedTab: selectedTab})}
                selectedTitleStyle={styles.tabSelectedStyle}
                badgeText={badgeText}
                renderIcon={() =><Image source={icon} style={styles.iconStyle}/>}
                renderSelectedIcon={() =>
                <Image source={selectedIcon} style={styles.iconStyle}/>}
            >
                <Component1 {...this.props}/>
            </TabNavigator.Item>
        )
    }

    _renderTabIndicator() {
        let tabs = [{
            text: '首页',
            iconSource: require('../../img/icon_tabbar_homepage.png'),
            selectedIconSource: require('../../img/icon_tabbar_homepage_selected.png')
        },{
            text: '商店',
            iconSource: require('../../img/icon_tabbar_merchant_normal.png'),
            selectedIconSource: require('../../img/icon_tabbar_merchant_selected.png')
        },{
            text: '我的',
            iconSource: require('../../img/icon_tabbar_mine.png'),
            selectedIconSource: require('../../img/icon_tabbar_mine_selected.png')
        },{
            text: '更多',
            iconSource: require('../../img/icon_tabbar_misc.png'),
            selectedIconSource: require('../../img/icon_tabbar_misc_selected.png')
        }];
        return <PagerTabIndicator tabs={tabs} iconStyle={{width:30,height:30}} selectedIconStyle={{width:30,height:30}}/>;
    }
}
// <Navigator
// initialRoute={{name:componentName,
//     component:component,
//     params: {
//     tabBar: {
//         hide: () => this.handleTabBar(false),
//             show: () => this.handleTabBar(true)
//     }
// }}}
// configureScene={(route)=>{
//     return Navigator.SceneConfigs.PushFromRight;}
// }
// renderScene={(route,navigator)=>{
//     let Component = route.component;
//     if(route.component){
//         return <Component {...route.params} navigator={navigator}/>
//     }
// }}
// />
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabSelectedStyle: {
        color: 'orange'
    },
    iconStyle: {
        width: Platform.OS === 'IOS' ? 30 : 25,
        height: Platform.OS === 'IOS' ? 30 : 25
    }
});
